<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>吃喝玩乐</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<style>
			*{margin:0;border:0;padding:0;}
			body{width:100%;max-width:720px;margin:auto;overflow-x: hidden;}
			img{max-width: 100%;display:block;}
			#line_way{position:relative;top:-1px;}
    			#line_way ul{width:100%;height:100%;}
    			#line_way ul li{position:absolute;border:1px solid red;z-index: 100;opacity:0}
    			#floDiv{position:fixed;display:none;z-index: 200;}
		</style>
	</head>
	<body>
		<img src="images/chwl_01.png"/>
		<div id="line_way">
			<img src="images/chwl_02.png"/>
			<ul>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
		<img src="" id="floDiv"/>
		<script type="text/javascript">
			
			var wid = window.innerWidth;
			var floDiv = document.getElementById('floDiv');
			floDiv.style.width = wid/750*590+'px';
			//floDiv.style.height = wid/720*680+'px';
			floDiv.style.top = wid/750*150+'px';
			floDiv.style.left = wid/750*65+'px';
			floDiv.onclick = function(){this.style.display = 'none'};
		
			var posArr = [
				pos(480,25),
				pos(480,110),
				pos(480,200),
				pos(480,290),
				pos(360,370),
				pos(255,515),
				pos(255,605),
				pos(255,690),
				pos(255,880),
				pos(460,1050),
				pos(460,1145),
				pos(460,1395),
				pos(460,1480),
				pos(460,1570),
				pos(255,1750),
				pos(255,1950),
				pos(460,2095),
				pos(460,2360),
				pos(460,2455),
				pos(255,2845),
				pos(255,2940),
				pos(255,3025),
				pos(255,3110),
				pos(255,3195),
				pos(460,3390)
			];
			var lists = document.getElementById('line_way').getElementsByTagName('li');
			for(var i=0;i<posArr.length;i++){
				lists[i].style.width = posArr[i].w+'px';
				lists[i].style.height = posArr[i].w+'px';
				lists[i].style.left = posArr[i].x+'px';
				lists[i].style.top = posArr[i].y+'px';
				lists[i].index = i;
				lists[i].onclick = function(){
					floDiv.style.display = 'block';
					floDiv.src = './images/desc'+(this.index+1)+'.png'
				};
			}
			function pos(rx,ry){
				var wid = window.innerWidth;
				return {
					x : wid/750*rx,
					y : wid/750*ry,
					w : wid/750*60
				}
			}
			
		</script>
	</body>
</html>